<template>
  <dv-border-box1 style="background-size: cover;" :color="['#ffeca8', 'gold']" :class="isFullScreen?'fullscreen-div':''"
                  class="back" ref="borderRef">
    <div
        style="width: 100%;height: 100%;display: flex;flex-direction: column;">
      <img style="width: 180px;position: absolute;left: 40px;top:16px"
           src="http://www.ynpetgc.cn/static/img/logo-top.797dcaac.png">
      <img @click="playLive" style="width: 72px;position: absolute;right: 40px;top:8px;border-radius: 50%"
           src="../../../assets/images/大理大学logo.jpg">
      <div style="display: flex;justify-content: center">
        <div style="display: flex;flex-direction: column;align-items: center;padding-top: 16px">
                        <span style="color: gold;position: absolute;font-size: 30px;font-weight: 700">
                            {{ userStore.race.name }}
                        </span>
          <dv-decoration-5 :color="['#ff793e', '#ff793e']" style="width:1400px;height:80px;"/>
        </div>
      </div>

      <div style="flex: 1;padding: 0px 16px;box-sizing: border-box">
        <div style="display:flex;flex-direction: row;align-items: center;height: 100%;" v-show="currentPage==0">
          <div style="flex: 1;height: 100%;display: flex;flex-direction: column">
            <div style="flex: 1;display: flex;flex-direction: column">
              <div
                  style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start">
                <span style="margin-bottom: 16px">赛点风采</span>
              </div>
              <el-image
                  style="width: 100%;height: 0px;object-fit: cover;flex-grow: 1;display: block"
                  src="src/assets/images/大理大学.jpeg"/>
            </div>
            <div style="flex: 1;display: flex;">
              <div style="flex: 1">
                <div
                    style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start;display: flex;">
                  <span style="margin-bottom: 16px;text-align: left">性别分布</span>
                </div>
                <dv-capsule-chart :config="sexConfig"
                                  style="width:100%;padding: 60px 20px"/>
              </div>

              <div style="flex: 1;display: flex;flex-direction: column">
                <div
                    style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start;display: flex;flex-direction: column">
                  <span style="margin-bottom: 16px;text-align: left">年龄分布</span>
                </div>
                <dv-active-ring-chart :config="ageConfig" style="width:200px;height: 200px;align-self: center"/>
              </div>
            </div>
            <div style="flex: 2;display: flex;flex-direction: column">
              <div
                  style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start">
                <span style="margin-bottom: 16px">学校排行榜</span>
              </div>
              <div style="height: 160px;position: relative;width: 100%">
                <div v-if="this.paiHangConfig.data.length>0"
                     style="position: absolute;left: 0px;right: 0px;width: 120px;height: 120px;margin: 0 auto">
                  <svg style="position: absolute;left: 0px;right: 0px;margin: 0 auto;" width="40" id="crown1"
                       fill="gold"
                       data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 100 50">
                    <polygon class="cls-1" points="12.7 50 87.5 50 100 0 75 25 50 0 25.6 25 0 0 12.7 50"></polygon>
                  </svg>


                  <image-preview
                      style="width: 80%;height: 80%;position: absolute;left: 0px;right: 0px;margin: 0 auto;margin-top: 24px;border-radius: 50%"
                      :src="this.paiHangConfig.data[0].badgeSrc"/>

                  <span
                      style="position: absolute;left: 0px;right: 0px;margin: 0 auto;bottom: -28px;color: #fdf2bd;font-size: 18px;width: 120px;white-space: nowrap; /* 确保文本在一行内显示 */overflow: hidden; /* 隐藏溢出的内容 */text-overflow: ellipsis;">{{
                      this.paiHangConfig.data[0].name
                    }}</span>
                </div>

                <div
                    v-if="this.paiHangConfig.data.length>1"
                    style="position: absolute;left: -170px;right:  0px;width: 110px;height: 110px;margin: 0 auto;margin-top: 24px">
                  <svg style="position: absolute;left: 0px;right: 0px;margin: 0 auto;" width="40" id="crown1"
                       fill="#EEEEEEFF" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 100 50">
                    <polygon class="cls-1" points="12.7 50 87.5 50 100 0 75 25 50 0 25.6 25 0 0 12.7 50"></polygon>
                  </svg>

                  <image-preview
                      style="width: 80%;height: 80%;position: absolute;left: 0px;right: 0px;margin: 0 auto;margin-top: 24px;border-radius: 50%"
                      :src="this.paiHangConfig.data[1].badgeSrc"/>
                  <!--                  <img-->
                  <!--                      style="width: 80%;height: 80%;position: absolute;left: 0px;right: 0px;margin: 0 auto;margin-top: 24px;border-radius: 50%"-->
                  <!--                      src="../../../assets/images/大理大学logo.jpg">-->
                  <span
                      style="position: absolute;left: 0px;right: 0px;margin: 0 auto;bottom: -28px;color: #fdf2bd;font-size: 18px;;width: 120px;white-space: nowrap; /* 确保文本在一行内显示 */overflow: hidden; /* 隐藏溢出的内容 */text-overflow: ellipsis;">{{
                      this.paiHangConfig.data[1].name
                    }}
                  </span>
                </div>

                <div
                    v-if="this.paiHangConfig.data.length>2"
                    style="position: absolute;left: 0px;right:  -170px;width: 110px;height: 110px;margin: 0 auto;margin-top: 24px">
                  <svg style="position: absolute;left: 0px;right: 0px;margin: 0 auto;" width="40" id="crown1"
                       fill="#D5926DFF" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 100 50">
                    <polygon class="cls-1" points="12.7 50 87.5 50 100 0 75 25 50 0 25.6 25 0 0 12.7 50"></polygon>
                  </svg>
                  <image-preview
                      style="width: 80%;height: 80%;position: absolute;left: 0px;right: 0px;margin: 0 auto;margin-top: 24px;border-radius: 50%"
                      :src="this.paiHangConfig.data[2].badgeSrc"/>

                  <span
                      style="position: absolute;left: 0px;right: 0px;margin: 0 auto;bottom: -28px;color: #fdf2bd;font-size: 18px;width: 120px;white-space: nowrap; /* 确保文本在一行内显示 */overflow: hidden; /* 隐藏溢出的内容 */text-overflow: ellipsis; ">{{
                      this.paiHangConfig.data[2].name
                    }}</span>
                </div>

              </div>
              <div style="flex-grow: 1;width: 100%;height: 0px">
                <dv-scroll-ranking-board :config="paiHangConfig" style="max-height: 100%"/>
              </div>
            </div>
          </div>
          <div style="flex: 1.5;height: 100%;display: flex;flex-direction: column">
            <div style="height: 120px;color: #fdf2bd;font-weight: bolder;font-size: 20px;padding: 0px 16px">
              <div style="display:flex;height: 100%;display: flex;justify-content: space-evenly">
              <span
                  style="font-size: 78px; font-family: Pc_Baidunumber;text-shadow: 0 0 .06rem rgba(0, 0, 0, .2);line-height: 120px">16°C</span>
                <div style="display:flex;flex-direction: column;justify-content: center;margin-left: 16px">
                  <span style="font-size: 28px">局部多云</span>
                  <span style="font-size: 28px;text-align: left;margin-top: 16px;display: flex">
                  14~21°C
                  <div class="color-span_65nFn false cu-color-white"
                       style="background-color: #37D43C;border-radius: 8px;margin-left: 16px"><span class="text_3FH2R"><!--s-slot-->22 优
                    <!--/s-slot--></span></div>
                </span>
                </div>
              </div>
            </div>

            <div
                style="flex: 1;display: flex;align-items: center;justify-content: center;position: relative;flex-direction: column">

              <div
                  style="height: 520px;width: 520px;position: relative;display: flex;align-items: center;justify-content: center">
                <dv-flyline-chart-enhanced :config="flyLineConfig"
                                           style="width:66%;height:66%;z-index: 4;position: absolute;left: 17%;top: 17%"/>
                <img class="rotate" style="position:absolute;width: 90%;height: 90%;left: 4%;top: 4%"
                     src="../../../assets/images/lbx.png">
                <img class="rotate2" style="position:absolute;width: 93%;height: 93%;left: 2%;top: 2%"
                     src="../../../assets/images/jt.png">
                <img style="position:absolute;width: 70%;height: 70%;"
                     src="../../../assets/images/云南省.png">
                <div
                    style="height: 100px;width: 100%;bottom: 0px;position: absolute;display: flex;align-items: center;justify-content: space-evenly">
                  <div
                      style="z-index: 66;display: flex;flex-direction: column;align-items: center;justify-content: center;flex: 1">
                    <span style="font-size: 32px;font-weight: bolder;color: #fdf2bd;letter-spacing: 6px">学校总数</span>
                    <span style="font-size: 48px;font-weight: bolder;color: gold;letter-spacing: 12px">
                  {{ schoolTotalNum }}个</span>
                  </div>
                  <div
                      style="z-index: 66;display: flex;flex-direction: column;align-items: center;justify-content: center;flex: 1">
                    <span
                        style="font-size: 32px;font-weight: bolder;color: #fdf2bd;letter-spacing: 6px">运动员总数</span>
                    <span style="font-size: 48px;font-weight: bolder;color: gold;letter-spacing: 12px">
                  {{ stuTotalNum }}人</span>
                  </div>
                </div>

              </div>

            </div>

            <div style="height: 320px;display: flex;flex-direction: column">
              <div
                  v-if="showSubList[showSubIndex]"
                  style="color: #fdf2bd;font-weight: bolder;font-size: 20px;padding: 0px 16px;margin-bottom: 16px;align-self: start;display: flex">
                <span style="margin-bottom: 16px">{{ showSubList[showSubIndex].title }}项目成绩</span>
              </div>
              {{ showSubIndex }}
              <div id="dataExcel" style="flex: 1;display: flex;align-items: center;width: 100%;">

              </div>
            </div>
          </div>
          <div style="flex: 1;height: 100%;display: flex;flex-direction: column">
            <div style="display: flex;flex-direction: column;flex: 1;align-items: center">
              <div
                  style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start">
                <span style="margin-bottom: 16px">当前项目</span>
              </div>
              <div style="flex-grow: 1;height: 0px;overflow-y: scroll;width: 100%;padding: 16px">
                <a-steps
                    style="color:#FFFFFF;width: 100%"
                    direction="vertical"
                    size="small"
                    :current="nowSubIndex"
                    :items="subList"
                ></a-steps>
              </div>
            </div>
            <div style="flex: 1">
              <div
                  style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start;display: flex;">
                <span style="margin-bottom: 16px">民族健身操比赛进度</span>
              </div>
              <div
                  style="display: flex;align-items: center;color: white;font-weight: bolder;font-size: 22px;justify-content: space-between">
                <dv-percent-pond :config="completeConfig" style="width:200px;height:100px;"/>
                <div
                    style="width:220px;padding: 16px;display: flex;align-items: center;display: flex;flex-direction: column;">
                  <dv-decoration-9 style="height:140px;width: 140px" :color="['#ff793e', '#ffab3e']"
                  >
                    {{ completeConfig.value + "%" }}
                  </dv-decoration-9>
                </div>
              </div>
              <div style="color: white;font-weight: bolder;font-size: 22px;"> {{
                  0 + "人/" + stuTotalNum + "人"
                }}
              </div>
            </div>
            <div style="flex: 2;display: flex;flex-direction: column">
              <div
                  style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start">
                <span style="margin-bottom: 16px">实时数据</span>
              </div>

              <dv-scroll-board :config="listConfig" style="flex: 1;"/>

            </div>
          </div>
        </div>
        <div style="display:flex;flex-direction: row;align-items: center;height: 100%;" v-show="currentPage==1">
          <div style="box-sizing: border-box;background: #1ab394;height: 100%;flex: 1">
            <HIKVideo style="width:100%;height:100%" ref="hVP"></HIKVideo>
          </div>
        </div>
      </div>
      <dv-decoration-7 :color="['#ffeca8', 'gold']" style="width:auto;height:30px;align-self: center;"><span
          style="color: gold;margin: 0px 16px">昆明云体科技有限公司技术支持</span></dv-decoration-7>
    </div>

    <a-modal v-model:open="showBigSchoolScoreList">
      <div
          style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start">
        <span style="margin-bottom: 16px">学校排行榜</span>
      </div>
      <div style="height: 160px;position: relative;width: 100%">
        <div v-if="this.paiHangConfig.data.length>0"
             style="position: absolute;left: 0px;right: 0px;width: 120px;height: 120px;margin: 0 auto">
          <svg style="position: absolute;left: 0px;right: 0px;margin: 0 auto;" width="40" id="crown1"
               fill="gold"
               data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 100 50">
            <polygon class="cls-1" points="12.7 50 87.5 50 100 0 75 25 50 0 25.6 25 0 0 12.7 50"></polygon>
          </svg>


          <image-preview
              style="width: 80%;height: 80%;position: absolute;left: 0px;right: 0px;margin: 0 auto;margin-top: 24px;border-radius: 50%"
              :src="this.paiHangConfig.data[0].badgeSrc"/>

          <span
              style="position: absolute;left: 0px;right: 0px;margin: 0 auto;bottom: -28px;color: #fdf2bd;font-size: 18px;width: 120px;white-space: nowrap; /* 确保文本在一行内显示 */overflow: hidden; /* 隐藏溢出的内容 */text-overflow: ellipsis;">{{
              this.paiHangConfig.data[0].name
            }}</span>
        </div>

        <div
            v-if="this.paiHangConfig.data.length>1"
            style="position: absolute;left: -170px;right:  0px;width: 110px;height: 110px;margin: 0 auto;margin-top: 24px">
          <svg style="position: absolute;left: 0px;right: 0px;margin: 0 auto;" width="40" id="crown1"
               fill="#EEEEEEFF" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 100 50">
            <polygon class="cls-1" points="12.7 50 87.5 50 100 0 75 25 50 0 25.6 25 0 0 12.7 50"></polygon>
          </svg>

          <image-preview
              style="width: 80%;height: 80%;position: absolute;left: 0px;right: 0px;margin: 0 auto;margin-top: 24px;border-radius: 50%"
              :src="this.paiHangConfig.data[1].badgeSrc"/>
          <!--                  <img-->
          <!--                      style="width: 80%;height: 80%;position: absolute;left: 0px;right: 0px;margin: 0 auto;margin-top: 24px;border-radius: 50%"-->
          <!--                      src="../../../assets/images/大理大学logo.jpg">-->
          <span
              style="position: absolute;left: 0px;right: 0px;margin: 0 auto;bottom: -28px;color: #fdf2bd;font-size: 18px;;width: 120px;white-space: nowrap; /* 确保文本在一行内显示 */overflow: hidden; /* 隐藏溢出的内容 */text-overflow: ellipsis;">{{
              this.paiHangConfig.data[1].name
            }}
                  </span>
        </div>

        <div
            v-if="this.paiHangConfig.data.length>2"
            style="position: absolute;left: 0px;right:  -170px;width: 110px;height: 110px;margin: 0 auto;margin-top: 24px">
          <svg style="position: absolute;left: 0px;right: 0px;margin: 0 auto;" width="40" id="crown1"
               fill="#D5926DFF" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 100 50">
            <polygon class="cls-1" points="12.7 50 87.5 50 100 0 75 25 50 0 25.6 25 0 0 12.7 50"></polygon>
          </svg>
          <image-preview
              style="width: 80%;height: 80%;position: absolute;left: 0px;right: 0px;margin: 0 auto;margin-top: 24px;border-radius: 50%"
              :src="this.paiHangConfig.data[2].badgeSrc"/>

          <span
              style="position: absolute;left: 0px;right: 0px;margin: 0 auto;bottom: -28px;color: #fdf2bd;font-size: 18px;width: 120px;white-space: nowrap; /* 确保文本在一行内显示 */overflow: hidden; /* 隐藏溢出的内容 */text-overflow: ellipsis; ">{{
              this.paiHangConfig.data[2].name
            }}</span>
        </div>

      </div>
      <div style="flex-grow: 1;width: 100%;height: 800px">
        <dv-scroll-ranking-board :config="paiHangConfig" style="max-height: 100%"/>
      </div>
    </a-modal>
  </dv-border-box1>


</template>

<script>
import useUserStore from '@/store/modules/user'
import HIKVideo from '@/components/HIKVideo'
import * as echarts from "echarts";
import {getBigScreenData} from "@/api/business/score.js"
import ElementResizeDetector from "element-resize-detector";

export default {
  name: "index",
  components: {
    HIKVideo
  },
  data() {
    const userStore = useUserStore();
    const sexConfig = {
      data: [
        {
          name: '男',
          value: 80
        },
        {
          name: '女',
          value: 40
        },
      ]
    };
    const ageConfig = {
      data: [
        {
          name: '19岁以下',
          value: 10
        },
        {
          name: '19岁',
          value: 20
        },
        {
          name: '20岁',
          value: 67
        },
        {
          name: '21岁以上',
          value: 23
        }
      ]
    };
    const paiHangConfig = {
      data: []
    };
    const subList = [
      {id: 14, title: '民族健身操', description: "10月10日10:30-12:00", time: "2024-10-10T10:30:00"},
      {id: 4, title: '队列队形', description: "10月10日14:00-16:00", time: "2024-10-10T14:00:00"},
      {id: 9, title: '武术', description: "10月10日16:00-18:00", time: "2024-10-10T16:00:00"},
      {id: 5, title: '教学设计', description: "10月10日19:30-21:00", time: "2024-10-10T19:30:00"},
      {id: 6, title: '片段教学', description: "10月11日08:30-12:00", time: "2024-10-11T08:30:00"},
      {id: 10, title: '球类', description: "10月11日14:00-16:00", time: "2024-10-11T14:00:00"},
      {id: 8, title: '体操', description: "10月11日16:00-18:00", time: "2024-10-11T16:00:00"},
      {id: 1, title: '专业教育理论知识', description: "10月11日19:30-21:30", time: "2024-10-11T19:30:00"},
      {id: 15, title: '1分钟跳绳', description: "10月12日08:30-09:30", time: "2024-10-12T08:30:00"},
      {id: 7, title: '田径', description: "10月12日09:30-12:00", time: "2024-10-12T09:30:00"},
    ];
    const completeConfig = {
      value: 0,
      colors: ['#ff793e', '#ffab3e']
    };
    const listConfig = {
      headerBGC: "rgb(227 33 39 / 72%)",
      oddRowBGC: 'rgb(227 33 39 / 72%)',
      evenRowBGC: 'transparent',
      header: ['姓名', '项目', '分项', "次数", '成绩', '得分', "时间"],
      rowNum: 10,
      data: [],
    };
    const flyLineConfig = {
      text: {
        color: 'orange',
        show: true,
        fontSize: 16
      },
      points: [
        {
          name: '临沧',
          coordinate: [0.24, 0.66]
        },
        {
          name: '保山',
          coordinate: [0.18, 0.50],
        },
        {
          name: '怒江',
          coordinate: [0.15, 0.28],
        },
        {
          name: '迪庆',
          coordinate: [0.24, 0.15],
        },
        {
          name: '大理',
          coordinate: [0.30, 0.40],
          halo: {
            show: true,
          },
          fontSize: 16
        },
        {
          name: '普洱',
          coordinate: [0.35, 0.73],
        },
        {
          name: '景洪',
          coordinate: [0.37, 0.86],
        },
        {
          name: '玉溪',
          coordinate: [0.50, 0.60],
        },
        {
          name: '红河',
          coordinate: [0.63, 0.70],
        },
        {
          name: '文山',
          coordinate: [0.84, 0.65],
        },
        {
          name: '曲靖',
          coordinate: [0.74, 0.45],
        },
        {
          name: '昭通',
          coordinate: [0.74, 0.16],
        },
        {
          name: '丽江',
          coordinate: [0.37, 0.25],
        },
        {
          name: '楚雄',
          coordinate: [0.47, 0.45],
        },
        {
          name: '德宏',
          coordinate: [0.08, 0.55],
        },
        {
          name: '昆明',
          coordinate: [0.62, 0.50],

        },
      ],
      lines: [
        {
          source: '临沧',
          target: '大理',
          width: 2,
          color: 'red'
        },
        {
          source: '德宏',
          target: '大理',
          width: 2,
          color: 'red'
        },
        {
          source: '保山',
          target: '大理',
          width: 2,
          color: 'red'
        },
        {
          source: '怒江',
          target: '大理',
          width: 2,
          color: 'red'
        },
        {
          source: '昆明',
          target: '大理',
          width: 2,
          color: 'red'
        },
        {
          source: '丽江',
          target: '大理',
          width: 2,
          color: 'red'
        },
        {
          source: '楚雄',
          target: '大理',
          width: 2,
          color: 'red'
        },
        {
          source: '玉溪',
          target: '大理',
          width: 2,
          color: 'red'
        },
        {
          source: '普洱',
          target: '大理',
          width: 2,
          color: 'red'
        },
        {
          source: '景洪',
          target: '大理',
          width: 2,
          color: 'red'
        },
        {
          source: '红河',
          target: '大理',
          width: 2,
          color: 'red'
        },
        {
          source: '文山',
          target: '大理',
          width: 2,
          color: 'red'
        },
        {
          source: '曲靖',
          target: '大理',
          width: 2,
          color: 'red'
        },
        {
          source: '昭通',
          target: '大理',
          width: 2,
          color: 'red'
        },
        {
          source: '迪庆',
          target: '大理',
          width: 2,
          color: 'red'
        },
      ],
    };
    return {
      userStore,
      currentPage: 0,
      sexConfig,
      ageConfig,
      paiHangConfig,
      isFullScreen: false,

      subList,
      completeConfig,
      listConfig,
      flyLineConfig,
      pause: true,
      dataExcel: null,
      schoolTotalNum: 0,
      stuTotalNum: 0,
      schoolScoreResList: [],
      stuScoreResList: [],
      nowSubIndex: -1,
      timer: null,
      showBigSchoolScoreList: false,
      showSubIndex: 0,
      showSubList: []
    }
  },
  mounted() {
    let that = this;
    this.dataExcel = echarts.init(document.getElementById('dataExcel'));
    window.addEventListener('keydown', this.handleKeyDown);
    this.fullScreen();

    setInterval(() => {
      this.showSubList = [];
      for (let i = 0; i < this.subList.length; i++) {
        let data = new Date(this.subList[i].time);
        if (Date.now() > data) {
          this.showSubList.push(this.subList[i]);
        }
      }
      if (this.showSubIndex < this.showSubList.length - 1) {
        this.showSubIndex++;
      } else {
        this.showSubIndex = 0;
      }
      let nowBigScreenBaseSubjectItem;
      for (let i = 0; i < this.bigScreenBaseSubjectItems.length; i++) {
        let bigScreenBaseSubjectItem = this.bigScreenBaseSubjectItems[i];
        if (bigScreenBaseSubjectItem.id == this.showSubList[this.showSubIndex].id) {
          nowBigScreenBaseSubjectItem = bigScreenBaseSubjectItem;
          console.log(bigScreenBaseSubjectItem);
        }
      }
      let dataAxis = [];
      let data = [];
      for (let i = 0; i < nowBigScreenBaseSubjectItem.bigScreenSchoolSubItems.length; i++) {
        dataAxis.push(nowBigScreenBaseSubjectItem.bigScreenSchoolSubItems[i].schoolName);
        data.push(nowBigScreenBaseSubjectItem.bigScreenSchoolSubItems[i].score)
      }

      let yMax = nowBigScreenBaseSubjectItem.totalScore;
      let dataShadow = [];
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }
      this.dataExcel = echarts.init(document.getElementById('dataExcel'));
      this.dataExcel.setOption({
        grid: {
          left: '4%',   // 左侧内边距
          right: '4%',  // 右侧内边距
          top: '4%',    // 顶部内边距
          bottom: '4%'  // 底部内边距
        },
        padding: 0,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            color: '#fff',
            interval: 0, // 强制显示所有标签
            rotate: -90, // 设置旋转角度
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'gold'
          }
        },
        series: [
          {
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#83bff6'},
                {offset: 0.5, color: '#188df0'},
                {offset: 1, color: '#188df0'}
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: '#2378f7'},
                  {offset: 0.7, color: '#2378f7'},
                  {offset: 1, color: '#83bff6'}
                ])
              }
            },
            data: data
          }
        ]
      });
    }, 5000)
    setInterval(() => {
      getBigScreenData().then(res => {
        console.log(res);
        that.schoolTotalNum = res.data.schoolTotalNum;
        that.stuTotalNum = res.data.stuTotalNum;
        that.stuScoreResList = res.data.stuScoreResList;
        that.schoolScoreResList = res.data.schoolScoreResList;
        that.listConfig.data = [];
        for (let i = 0; i < res.data.bigScreenScoreResArrayList.length; i++) {
          let bigScreenScoreRes = res.data.bigScreenScoreResArrayList[i];
          that.listConfig.data.push(
              [bigScreenScoreRes.name, bigScreenScoreRes.subName, bigScreenScoreRes.subName2, bigScreenScoreRes.count, bigScreenScoreRes.rawScore, bigScreenScoreRes.convScore, bigScreenScoreRes.time]
          )
        }
        that.bigScreenBaseSubjectItems = res.data.bigScreenBaseSubjectItems;
        that.reDrawChart();
      });
    }, 5000);


    let timer = null;
    ElementResizeDetector().listenTo(document.getElementById("dataExcel"), function (element) {
      console.log("resize");
      if (timer != null) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        that.dataExcel.resize();
      }, 100)
    });
  },
  beforeUnmount() {
    window.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    getNowSub() {
      return 0;
    },
    reDrawChart() {
      this.paiHangConfig.data = [];
      for (let i = 0; i < this.schoolScoreResList.length; i++) {
        this.paiHangConfig.data.push({
          name: this.schoolScoreResList[i].name,
          value: parseFloat(this.schoolScoreResList[i].score),
          ranking: this.schoolScoreResList[i].mc,
          badgeSrc: this.schoolScoreResList[i].badgeSrc
        });
      }

      for (let i = 0; i < this.subList.length; i++) {
        let data = new Date(this.subList[i].time);
        if (Date.now() > data) {
          this.nowSubIndex = i;
        }
      }


      console.log(this.paiHangConfig)
    },
    fullScreen() {
      this.isFullScreen = true;
    },
    async showHk() {
      await this.$refs.hVP.InitPlugin(2);
    },
    handleKeyDown(event) {
      console.log(event.key)
      if (event.key === 'Space' || event.key === ' ') {
        this.pause = !this.pause;
      }
    },
  }
}
</script>

<style>
.back {
  background-image: url('../../../assets/images/lotterybk.jpg')
}

.fullscreen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.dv-scroll-ranking-board {
  --01413bf0: #ffca59 !important;
  --10122c43: #fdf2bd !important;
  --41a52d43: 18px !important;
  --193a1454: rgba(228, 251, 19, 0.5) !important;

}

.ant-steps-item-title {
  color: #ffca59 !important;
  font-size: 24px !important;
  margin-left: 64px;
}

.ant-steps-item-description {
  color: #fdf2bd !important;
  font-size: 22px !important;
  margin-left: 64px;
}

.ant-steps-item-icon {
  border-color: gold !important;
}

.ant-steps-item-process .ant-steps-item-icon {
  background-color: orange !important;
}

.ant-steps-icon {
  color: gold !important;
}

.ant-steps-item-finish .ant-steps-item-tail::after {
  background-color: gold !important;
}

.rotate {
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate2 {
  animation: rotate2 20s linear infinite;
}

@keyframes rotate2 {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
</style>